<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>佰林の订单列表</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css">
    <link rel="stylesheet" href="/admin/css/style.css">
    <script src="/common/jquery-3.3.1.min.js"></script>
    <script src="/common/layui/layui.js"></script>
    <script src="/common/vue.min.js"></script>
</head>
<body>
<div class="main" id="app">
    <!--        左侧数据-->
    <div id="fixedData">
        <!--顶栏-->
        <header>
            <h1 v-text="webname"></h1>
            <div class="breadcrumb">
                <i class="layui-icon">&#xe715;</i>
                <ul>
                    <li v-for="vo in address">
                        <a v-text="vo.name" :href="vo.url"></a> <span>/</span>
                    </li>
                </ul>
            </div>
        </header>
        <!--左栏-->
        <div class="left">
            <ul class="cl">
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                              class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                           v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--右侧-->
    <div class="right" id="Right">
        <div class="layui-row">
            <div class="layui-col-lg4 layui-col-md-offset8" style="text-align: right">

                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="k" value="" placeholder="单号" class="layui-input key">
                </div>
                <button type="button" class="layui-btn sou">搜索</button>
            </div>
        </div>

        <table class="layui-table layui-form">
            <thead>
            <tr>
                <th> 序号</th>
                <th>订单号</th>
                <th>用户姓名</th>
                <th>收货地址</th>
                <th>下单时间</th>
                <th>商品状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="id36567" v-for="(item,index) of orderList" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.id}}</td>
                <td>{{item.relName}}</td>
                <td>{{item.place}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.status===0?"待商家确认":item.status===1 ? '正在配送' : '已完成'}}</td>
                <td>
                    <button class="layui-btn  layui-btn-xs layui-btn-danger" @click="getDetail(item.id)">详情</button>
                    <button v-if="item.status==1" class="layui-btn  layui-btn-xs layui-btn-radius" @click="handleOk(item.id)">确认</button>
                </td>
            </tr>

            </tbody>
        </table>
        <div id="setSymptomCategory" class="layer_self_wrap layui-container"  style="width:760px;display:none;">
            <table id="tableSc" class="layui-table" lay-filter="tableSc"  >
                <tr>
                    <th lay-data="{field:'commodityType', width:100}">商品类型</th>
                    <th lay-data="{field:'commodityName', width:80, sort:true}">名字</th>
                    <th lay-data="{field:'commodityNum', width:80, sort:true}">数量</th>
                    <th lay-data="{field:'sign'}">签名</th>
                </tr>
            </table>
        </div>
    </div>
    <script src="/admin/js/config_user.js"></script>
    <script>
        let right = new Vue({
            el: '#Right',
            data: {
                orderList: [],
                commodityType: [],
                status: 0,
                activePage: 1,
                tableListData:[],//订单详情
            },
            methods: {
                //确认订单
                handleOk(id){
                    $.ajax({
                        url:'order/update',
                        type:'post',
                        data:JSON.stringify({
                            id:id,
                            status:Number(this.status)+1
                        }),
                        contentType: "application/json;charset=UTF-8",
                        success: (data)=> {
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg('操作成功');
                            });
                            this.getOrder(this.activePage, this.status*1)
                        }
                    })
                },

                //获取可预约餐位信息
                getOrder(activePage, status) {
                    let userName = JSON.parse(window.sessionStorage.getItem('userInfo'));
                    $.ajax({
                        url: 'order/select',
                        type: 'post',
                        data: JSON.stringify({
                            userId: userName.username,
                            status: status
                        }),
                        contentType: "application/json;charset=UTF-8",
                        success: (data) => {
                            if (isNotEmpty(data)) {
                                this.orderList = data;
                            } else {
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg('页面无数据');
                                });
                            }
                        }
                    })
                },
                //查看详情
                getDetail(id) {
                    window.location.href = '/toUserOrderDetail?'+id +'&'+(this.status*1+1) ;
                },
            },
            mounted() {
                let search = window.location.search?.substring(1);
                this.status = search;
                console.log(search, 'search')
                this.getOrder(this.activePage, search*1)
            },
        })
    </script>
    <script>

    </script>
</body>
</html>
